import { defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import Banner from "@/components/Banner";
import CardView from "@/components/CardView";
import Text from "@/components/Text";
import { useDetail } from "@/hooks";
import { useRoute } from "vue-router";
import { getUserInfoUrl } from "@/command/apiTool";
export default defineComponent({
  name: "",
  setup() {
    const route = useRoute();
    const [deviceInfo] = useDetail(
      getUserInfoUrl(
        {
          dh: "/api/H5/farmerBase/getDeviceDetail",
          xh: "/api/h5/richInspection/small/queryDeviceOne",
        },
        {
          id: route.query.id,
        }
      ),
      {
        img: "",
        name: "",
        features: "",
        remark: "",
        baseId: "",
        deviceFeature: "",
        deviceImg: "",
        deviceName: "",
        deviceNote: "",
      }
    );
    const render1 = () => {
      return (
        <Banner url={deviceInfo.value.img || deviceInfo.value.deviceImg} />
      );
    };

    return () => {
      return (
        <PageTitle title="设备详情" childClass="!p-[0px]">
          {render1()}
          {/* 加载富文本 */}
          <CardView
            title={deviceInfo.value.name || deviceInfo.value.deviceName}
            radius={0}
          >
            <Text>
              {deviceInfo.value.remark || deviceInfo.value.deviceNote}
            </Text>
          </CardView>
          <CardView title={"设备特点"} radius={0} class={"mt-[10px]"}>
            <Text>
              {deviceInfo.value.features || deviceInfo.value.deviceFeature}
            </Text>
          </CardView>
        </PageTitle>
      );
    };
  },
});
